<template>
 <view class="container">
		<!-- 导航栏 -->
		<navbar v-model:current="currentTab" :page-scroll-top="pageScrollTop" @scroll-page="scrollPage"></navbar>
		<!-- 商品 -->
		<product v-model:show="showSafeguard" :productDetail="productDetail"></product>
		<!-- 评价 -->
		<evaluate :productId="productDetail.id"></evaluate>
		<!-- 详情 -->
		<detail :richText="detailHtml"></detail>
		<!-- 推荐 -->
		<recommend ref="recommendRef" :productDetail="productDetail"></recommend>
		<!-- 商品导航 -->
		<goods ref="goodsRef" v-model:show-phone="showPhone" :productId="productDetail.id" @submit="openConfirm"></goods>
		<!-- 保障 -->
		<safeguard v-model:show="showSafeguard"></safeguard>
		<!-- 服务电话 -->
		<service-phone v-model:show="showPhone" :phone="merchantDetail.phone" :workTime="merchantDetail.workTime" :noWorkTime="merchantDetail.noWorkTime"></service-phone>
		<!-- 确认订单 -->
		<confirm ref="confirmRef" v-model:show="showConfirm" :productDetail="productDetail" @open-address="openAddress" @openTime="openTime" @open-agreement="openAgreement"></confirm>
		<!-- 服务地址 -->
		<serve-address ref="addressRef" v-model:show="showAddress" @close-address="closeAddress"></serve-address>
		<!-- 服务时间 -->
		<serve-time :show="showTime" :productDetail="productDetail" :visibleItemCount="3" keyName="label" @close="closeTime" @cancel="closeTime" @confirm="confirmTime"></serve-time>
		<!-- 服务协议 -->
		<service-agreement :show="showAgreement" :richText="productDetail.agreement.content" @close="closeAgreement"></service-agreement>
		<!-- 服务区域 -->
		<service-area :serviceAreaStringList="productDetail.serviceAreaStringList"></service-area>
		<!-- 页面加载效果 -->
		<my-page-loading></my-page-loading>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onBeforeMount, onMounted, reactive, computed, nextTick } from 'vue';
	import { onLoad, onBackPress } from '@dcloudio/uni-app';
	import Navbar from './components/navbar.vue';
	import Product from './components/product.vue';
	import Evaluate from './components/evaluate.vue';
	import Detail from './components/detail.vue';
	import Recommend from './components/recommend.vue';
	import Goods from './components/goods.vue';
	import Safeguard from './components/safeguard.vue';
	import ServicePhone from './components/service-phone.vue';
	import Confirm from './components/confirm/confirm.vue';
	import ServeAddress from './components/serve-address.vue';
	import ServeTime from './components/serve-time.vue';
	import ServiceAgreement from './components/service-agreement.vue';
	import ServiceArea from './components/service-area.vue';
	import useScroll from './composition/useScroll';
	import useDetail from './composition/useDetail';
	import { getHouseholdProductById, getAppProductById } from './service';
	import { setToken } from '@/utils';
	import MyPageLoading from '@/components/my-page-loading/my-page-loading.vue';
	
	const { currentTab, pageScrollTop, scrollPage, getNavbarHeight, initElementPageTop } = useScroll();
	const { productDetail, merchantDetail } = useDetail();
	
	// 保障模态框
	const showSafeguard =  ref<boolean>(false);
	// 客服电话模态框
	const showPhone = ref<boolean>(false);
	
	// 确认订单模态框
	const confirmRef = ref<any>(null);
	const showConfirm = ref<boolean>(false);
	const openConfirm = (): void => {
		showConfirm.value = true;
	};
	const closeConfirm = (): void => {
		showConfirm.value = false;
	};
	
	// 服务地址模态框
	const addressRef = ref<any>(null);
	const showAddress = ref<boolean>(false);
	const openAddress = (id: number): void => {
		closeConfirm();
		showAddress.value = true;
		addressRef.value.selectedId = id;
	};
	const closeAddress = (address?: any): void => {
		showAddress.value = false;
		openConfirm();
		if (address) {
			confirmRef.value.setAddress(address);
		}
	};
	
	// 服务时间模态框
	const showTime = ref<boolean>(false);
	const openTime = (): void => {
		closeConfirm();
		showTime.value = true;
	};
	const closeTime = (): void => {
		showTime.value = false;
		openConfirm();
	};
	const confirmTime = (serviceStartTime: string): void => {
		confirmRef.value.setServiceTime(serviceStartTime);
	}
	
	// 服务协议模态框
	const showAgreement = ref<boolean>(false);
	const openAgreement = (): void => {
		closeConfirm();
		showAgreement.value = true;
	};
	const closeAgreement = (): void => {
		showAgreement.value = false;
		openConfirm();
	};
	
	// 产品详情内容
	const detailHtml = computed<string>(() => {
		const { detailHtml, noticeHtml } = productDetail;
		let html = '';
		if (detailHtml) html += detailHtml;
		if (noticeHtml) html += noticeHtml;
		return html;
	});
	
	onBackPress(() => {
		const popupMap = reactive<any>({
			showSafeguard,
			showPhone,
			showConfirm,
			showAddress,
			showTime,
			showAgreement,
		});
		for(const key in popupMap) {
			if (popupMap[key]) {
				switch (key) {
					case 'showAddress':
					case 'showTime':
					case 'showAgreement':
						openConfirm();
					default:
						popupMap[key] = false;
						break;
				}
				return true;
			}
		}
	});
	
	onLoad(async ({ productId, type, Authorization }: any) => {
		await setToken(Authorization);

		productDetail.id = productId;
		const method = (type === 'app' ? getAppProductById : getHouseholdProductById);
		// 获取产品详情
		method(productId).then(res => {
			if (res.code === 200) {
				for(const key in productDetail) {
					productDetail[key] = res.data[key];
				}
				nextTick(() => {
					setTimeout(() => {
						// 关闭加载框
						uni.hideLoading();
						// 初始化元素距离顶部距离
						initElementPageTop();
					}, 1000);
				});
			};
		});
	});
	
	onBeforeMount(() => {
		uni.showLoading({ title: '加载中', mask: true });
	});
	onMounted(() => {
		getNavbarHeight();
	});
</script>

<style lang="scss" scoped>
	.container {
		background-color: $uni-bg-color;
	}
</style>
